<template>
    <div class="right-menu"  ref="rightMenu"
         v-show="show"
         :style="style"
         @mousedown.stop
         @contextmenu.prevent>
        <slot></slot>
    </div>
</template>
<script>
  export default {
    name: "RightMenu",
    data() {
      return {
        style: {}
      };
    },
    props: {
      id:{
        type: String,
        default:function () {
          return 'rightMenu'
        }
      },
      offset: {
        type: Object,
        default: function () {
          return {
            left: 0,
            top: 0
          };
        }
      },
      show: Boolean
    },
    watch: {
      show(show) {
        if (show) {
          this.$nextTick(this.setPosition);
        }
      },
      offset(){
        this.setPosition();
      }
    },
    beforeDestroy() {
      let popperElm = this.$el;
      if (popperElm && popperElm.parentNode === document.body) {
        document.body.removeChild(popperElm);
      }
      console.log('====================')
      document.removeEventListener("mousedown", this.clickDocumentHandler);
    },
    mounted() {
      this.$el.id = this.id
      document.body.appendChild(this.$el);
      document.addEventListener("mousedown", this.clickDocumentHandler);
    },
    methods: {
      clickDocumentHandler() {
        if (this.show) {
          this.$emit("update:show", false);
        }
      },
      setPosition() {
        this.style = {
          left: `${this.offset.left}px`,
          top: `${this.offset.top}px`
        };
      }
    }
  };
</script>
<style scoped>
    .right-menu {
        position: absolute;
        box-shadow:0 0 7px 0 rgba(4,0,0,0.2);
    }

</style>
